<html>
<head>
  <title>Home</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
        google.load('visualization', '1', {packages: ['annotatedtimeline']});

        function draw_timeline() {
            var url = "http://localhost:8080/showchartjson";
            var query = new google.visualization.Query(url);
            query.send(callback_draw_timeline);

            function callback_draw_timeline(response) {
                if (response.isError()) {
                    alert("Error in query: " + response.getMessage());
                    return;
                };
                var data = response.getDataTable();
                var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('timeline'));
                chart.draw(data, {title: 'Title'} );
            };
        };

        google.setOnLoadCallback(draw_timeline);
    </script>

</head>
<body>
  <div id="timeline" style='height: 600px; width=100%'>Timeline</div>
</body>
</html>
